<template>
  <section class="card-container">
      <section class="card-wrapper">
          
           <!-- 新闻列表 -->
          <section class="card card-three">
              <CardThree></CardThree>
          </section>
          <!-- 新闻摘要 -->
          <section class="card card-two">
              <CardTwo></CardTwo>
          </section>
         <!-- 电子报 -->
          <section class="card card-one">
              <CardOne></CardOne>
          </section>
      </section>
  </section>
</template>


<script>

import CardOne from '@/pages/card-one/index.vue';
import CardTwo from '@/pages/card-two/index.vue';
import CardThree from '@/pages/card-three/index.vue';

import { initData } from './script.js'

export default {
    name: 'card-container',
    data(){
        return {

        }
    },
    created(){
        initData.bind(this)();
    },
    methods:{

    },
    components:{
        CardOne,
        CardTwo,
        CardThree
    }
}

</script>

<style lang="scss" scoped>
    .card-container{
        width:100%;height:100%;background-color:#000;display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;background-image:url('/images/bg.png');background-size:cover;
        .card-wrapper{
            width:1700px;height:900px;display:flex;flex-wrap:nowrap;justify-content:space-between;
            .card{
               width:530px;height:100%;background-color:#fff;
            }
        }
        
    }
</style>

<style lang="scss">
    .mint-datetime-action{
        color:#c9242b;
    }

    ::-webkit-scrollbar {
        width: 8px;
        height: 12px;
        background-color: #fff;
    }

    ::-webkit-scrollbar-thumb {
        display: block;
        min-height: 12px;
        min-width: 8px;
        border-radius: 6px;
        background-color: rgb(217, 217, 217);
    }

    ::-webkit-scrollbar-thumb:hover {
        display: block;
        min-height: 12px;
        min-width: 8px;
        border-radius: 6px;
        background-color: rgb(159, 159, 159);
    }

</style>
